<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>通过鼠标点击绘制点</title>
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>
    <canvas id="webgl" width="512" height="512"></canvas>
</body>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>

<script>
    (function () {

        // 获取canvas对象
        var canvas = document.getElementById('webgl');

        // 获取webgl 上下文对象
        var gl = getWebGLContext(canvas);

        // 顶点着色器
        var vertex_shader_source = '' +
            'attribute vec4 a_Position;' +
            'void main() {' +
            '   gl_Position = a_Position;' +
            '   gl_PointSize = 10.0;' +
            '}';
        // 片元着色器
        var fragment_shader_source = '' +
            'precision mediump float;' +
            'uniform vec4 u_FragColor;' +
            'void main() {' +
            '   gl_FragColor = u_FragColor;' +
            '}';

        // 初始化着色器
        if (!initShaders(gl, vertex_shader_source, fragment_shader_source)) {
            console.log('初始化着色器失败！');
            return false;
        }

        // 获取 attribute 变量 a_Position 的存储地址
        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

        // 获取 uniform 变量 u_FragColor 的储存地址
        var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');

        if (a_Position < 0) {
            console.log('获取 a_Position 变量地址失败!');
            return false;
        }

        // 注册 canvas 点击事件
        canvas.onclick = function (ev) {
            click(ev, gl, canvas, a_Position);
        };

        // 指定需要清除的颜色
        gl.clearColor(0.0, 0.5, 0.5, 1.0);

        // 清除颜色
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 点数组
        var g_points = [];

        function click(ev, gl, canvas, a_Position) {
            console.log(ev);

            // 鼠标点击位置坐标--浏览器客户区中的坐标
            var client_x = ev.clientX;
            var client_y = ev.clientY;

            // 获取canvas 边界框矩形值
            var rect = ev.target.getBoundingClientRect();
            console.log(rect);

            // canvas范围内坐标
            var canvas_x = client_x - rect.left;
            var canvas_y = client_y - rect.top;

            // webgl系统坐标
            var gl_x = (canvas_x - canvas.width / 2) / (canvas.width / 2);
            var gl_y = (canvas.height / 2 - canvas_y) / (canvas.height / 2);

            // 存储坐标到数组
            g_points.push(gl_x, gl_y);

            // 清空canvas
            gl.clear(gl.COLOR_BUFFER_BIT);

            var len = g_points.length;
            for (var i = 0; i < len; i += 2) {

                // 将点的位置传递到 attribute 变量
                gl.vertexAttrib2f(a_Position, g_points[i], g_points[i + 1]);

                // 颜色值传递给 uniform 变量
                gl.uniform4f(u_FragColor, i * 0.01, i * 0.02, i * 0.03, 1.0);

                // 绘制点
                gl.drawArrays(gl.POINTS, 0, 1);

            }

        }


    }());


</script>

</html>